
import Vue from 'vue'
import VueRouter from 'vue-router'
//用路由插件
Vue.use(VueRouter)
//测试mapGetters是什么类型数据
import { mapGetters } from "vuex";
console.log(mapGetters("shopcart", ["carlist"]))
// import Home from '../pages/Home'
import Logon from '../pages/Logon'
import Register from '../pages/Register'
import Search from '../pages/Search'
import Detail from '../pages/Detail'
import AddCartSuccess from '../pages/AddCartSuccess'
import ShopCart from '@/pages/ShopCart'
import Trade from '@/pages/Trade'
import Pay from '@/pages/Pay'
console.log(Pay, "@@@@@@")
import PaySuccess from '@/pages/PaySuccess'
import Center from '@/pages/Center'
//引入二级路由
import myOrder from '@/pages/Center/myOrder'
import groupOrder from '@/pages/Center/groupOrder'
//??为什么这里不能这样引用  这样会报错!!!!
/* import Myuser from '@/store/user'
console.log(Myuser) */
import store from '@/store'
//!! 这里相当于重新写了VueRouter.prototype的push方法  方便this.$router的使用
const originalPush = VueRouter.prototype.push
/* VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
} */
VueRouter.prototype.push = function push(location, resolve, reject) {
    if (resolve && resolve) {
        originalPush.call(this, location, resolve, reject)
    }
    else {
        originalPush.call(this, location, () => { }, () => { })
    }
}

const Router = new VueRouter({
    routes: [
        {
            path: "/home",
            //使用了路由懒加载
            component: () => import("../pages/Home"),
            name: 'home',
            meta: { show: true }
        },
        {
            path: "/logon",
            name: 'logon',
            component: Logon,
            meta: { show: true }

        },
        {
            path: "/register",
            component: Register,
            meta: { show: false }

        },
        /* !!! /// 在路径的占位符后面添加  一个     ?     ，  代表 这个params参数可以传递，也可以不传递。  */
        {
            name: 'search',
            path: "/search/:keyword?",
            component: Search,
            meta: { show: true }

        },
        {
            name: "detail",
            path: "/detail/:id",
            component: Detail,
            meta: { show: true }
        },
        {
            name: "addCartSuccess",
            path: "/addCartSuccess",
            component: AddCartSuccess,
            meta: { show: true }
        },
        {
            name: "shopCart",
            path: "/shopCart",
            component: ShopCart,
            meta: { show: true }
        },
        {
            name: "trade",
            path: "/trade",
            component: Trade,
            meta: { show: true }
        },
        {
            name: "pay",
            path: "/pay",
            component: Pay,
            meta: { show: true },
            beforeEnter(to, from, next) {
                if (from.name == "trade") {
                    next()
                } else {
                    //从哪儿来 回那儿去
                    next(false)
                }
            }
        },
        {
            name: "paySuccess",
            path: "/paySuccess",
            component: PaySuccess,
            meta: { show: true },

        },
        {
            name: "center",
            path: "/center",
            component: Center,
            meta: { show: true },
            children: [
                {
                    path: 'myOrder',
                    component: myOrder
                },
                {
                    path: 'groupOrder',
                    component: groupOrder
                },
                {
                    path: '/center',
                    redirect: 'myOrder'
                }
            ]
        },
        //重定向到home  就是一开始访问哪儿
        {
            path: '*',
            redirect: "/home"
        },
        //这里的路由 是方便练习组件之间通信举例的组件
        {
            path: "/communication",
            name: "communication",
            component: () => import("@/pages/Communication/Communication.vue")

        }
    ],
    //路由跳转的时候 始终回到最顶端
    scrollBehavior(to, from, savedPosition) {
        // 始终滚动到顶部
        return { y: 0 }
    }

})
//!!!重点理解 路由守卫
Router.beforeEach(async (to, from, next) => {
    // console.log(store, "测试路由里面的store信息")
    // console.log(next)
    // console.log(to)
    // console.log(from)

    let token = store.state.user.token
    let userInfo = store.state.user.userInfo
    //用户登录了
    if (token) {
        //用户登录了 想跳转到登录页面
        if (to.name == 'logon') {
            //!!!!路由跳转尽量不要这样写  意思是完成不一样的！！！！ 看看浏览器收藏的解释
            // next('/home')
            next({ path: '/home' })
        } else {
            //如果有用户信息
            if (userInfo) {
                next()
            }
            //如果没有用户信息
            else {
                //派发action  让仓库存储用户信息
                try {
                    await store.dispatch('user/getUserInfo')
                    next()
                }
                //  获取不到用户信息 说明token 过期了 就执行这一步  清除过期的token
                catch (error) {
                    store.dispatch('user/getOutLogin')
                    next({ path: '/logon' })
                }
            }

        }
    }
    //用户未登录  有些组件不能去 比如 pay组件 center组件 等等
    else {
        let topath = to.path;
        //用于测试数据
        console.log(topath, '跳转地址信息')
        if (topath.includes('trade') || topath.includes('pay') || topath.includes('center')) {
            //比如要去个人中心  需要先登录 然后就直接跳转到个人中心 marker作为一个标记，用于登录后，知道登录后，跳转到什么页面
            next({ path: '/logon', query: { marker: topath } })
        }
        else {
            next();
        }
    }

})
export default Router